<template>
  <div class="flow_direction">
    <h2>品牌导向图</h2>
    <!-- 品牌导流图 -->
    <!-- <div
      class="dir_chart"
      id="myChart"
    ></div> -->
    <div class="dir_chart">
      <chart
        class="echarts"
        :options="opt"
        :auto-resize="true"
      ></chart>
    </div>
  </div>
</template>

<script>
var moment = require("moment");
import echarts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/graph";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";

export default {
  name: "HelloWorld",
  components: {
    chart: echarts
  },
  props: {
    chooseShop: {
      type: String,
      required: false,
      default: ""
    },
    dtMonth: {
      type: String,
      required: false,
      default: ""
    }
  },

  data() {
    return {};
  },
  mounted() {
    // this.drawLine();
    this.getBrandData("顺风大酒店", "AB");
  },

  methods: {
    getDataObject(shop, times) {
      let obj = {};
      obj["id"] = 0;
      obj["name"] = shop;
      obj["symbolSize"] = Math.pow(times, 0.3) * 10; // 30; // times/10
      // obj['category'] = '0'
      obj["draggable"] = true;
      obj["size"] = times;
      obj["value"] = times;
      if (obj["name"] == "顺风大酒店") {
        obj["label"] = {
          normal: {
            position: "inside",
            textStyle: {
              fontSize: 16
            },
            show: true
          }
        };
      }

      obj["itemStyle"] = {
        //   normal: {
        //     color: '#FFA971'
        //   }
        normal: {
          color: "#0b0e1c",

          // 设置阴影
          shadowBlur: 30,
          shadowColor: "rgba(132,12,176,1)",
          shadowOffset:20,
          borderColor: {
            colorStops: [
              {
                offset: 0,
                color: "#402B7E"
              },
              {
                offset: 1,
                color: "#A988CA"
              }
            ]
          },
          borderWidth: 1
        }
      };
      return obj;
    },
    getLinkObject(fromshop, toshop) {
      let obj = {};
      obj["source"] = fromshop.id;
      // obj['speed'] = 10;
      obj["id"] = toshop.id;
      obj["target"] = toshop.id;
      obj["value"] = toshop["value"];
      obj["label"] = {
        normal: {
          show: true
        }
      };
      return obj;
    },
    getBrandData(shopName, venues) {
      let andatongURL = this.$config.andatongurl + "/andatong/mall_stats";

      let query = {
        bi_name: "brand_link",
        dt_year: "2018",
        dt_month: "12",
        "bi_value.from_name": shopName,
        venue: venues
      };
      this.$http.post(andatongURL, query).then(result => {
        let data = result.data.data;

        let count = data.length;
        this.opt.series[0].data = [];
        this.opt.series[0].links = [];
        if (count === 0) {
          return;
        }
        let source = data[0];
        let total = parseInt(source["bi_value"]["total"]);
        let obj = this.getDataObject(source["bi_value"]["from_name"], total);
        obj["id"] = 0;
        this.$set(this.opt.series[0].data, 0, obj);
        console.log(" this.opt.series[0].data", this.opt.series[0].data);
        for (let i = 1; i < count; i++) {
          let elem = data[i];
          // let fromShop = elem['bi_value']['from_name']
          let toShop = elem["bi_value"]["to_name"];
          let times = elem["bi_value"]["times"];
          if (typeof times === "undefined") {
            times = 1;
          } else {
            times = parseInt(times);
          }
          let toObj = this.getDataObject(toShop, times);
          toObj["id"] = i;
          toObj["itemStyle"] = {
            normal: {
              // color: '#7187FA'
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "#A988CA"
                  },
                  {
                    offset: 1,
                    color: "#402B7E"
                  }
                ]
              }
            }
          };
          // toObj['category'] = '1'
          this.$set(this.opt.series[0].data, i, toObj);
          let linkObj = this.getLinkObject(obj, toObj);

          this.$set(this.opt.series[0].links, i - 1, linkObj);
          // 只保留16家店铺
          if (i + 1 > 16) {
            break;
          }
        }
      });
    }
  },
  data() {
    return {
      opt: {
        title: {
          show: false,
          text: "客户流向",
          // subtext: 'Truelore-Support',
          top: "top",
          left: "center"
        },
        tooltip: {},
        legend: [
          {
            formatter: function(name) {
              return echarts.format.truncateText(
                name,
                40,
                "14px Microsoft Yahei",
                "…"
              );
            },
            tooltip: {
              show: true
            },
            selectedMode: "true",
            bottom: 0,
            data: [
              "招标倾向性",
              "装饰装修项目",
              "房建项目",
              "园林绿化项目",
              "其他项目",
              "市政项目",
              "园林绿化项目"
            ]
          }
        ],
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataView: {
        //       show: true,
        //       readOnly: true
        //     },
        //     restore: {
        //       show: true
        //     },
        //     saveAsImage: {
        //       show: true
        //     }
        // }
        // },
        // animation: false,
        animationDuration: 500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            name: "",
            type: "graph",
            layout: "force",
            // label:{
            //   normal: {
            //     show: true
            //   }
            // },
            label: {
              normal: {
                show: true,
                color: "#EEE2FA",
                // textBorderColor: "white",
                // textBorderWidth: 1,
                position: "top",
                textStyle: {
                  fontSize: 14
                }
              }
            },
            force: {
              repulsion: 500,
              edgeLength: 200
            },
            // edgeSymbol: ['circle', 'arrow'],
            edgeSymbol: ["circle", "arrow"], // 导向线形状
            edgeSymbolSize: [0, 0], // 导向线形状大小
            edgeLabel: {
              textStyle: {
                fontSize: 12,
                color: "#DFC2FD"
              },
              // show: false,
              position: "middle",
              formatter: function(params) {
                let txt = "default";
                if (params.data.value !== undefined) {
                  txt = params.data.value;
                }
                return txt;
              }
            },
            data: [
              {
                id: 0,
                name: "顺风大酒店",
                symbolSize: [60, 60],
                draggable: false,
                category: "父节点",
                label: {
                  normal: {
                    position: "inside",
                    show: true
                  }
                },
                value: 200
              },
              {
                id: 1,
                name: "房建项目",
                value: 25,
                symbolSize: 40,
                category: "项目类型",
                draggable: true
              },
              {
                id: 2,
                name: "市政项目",
                symbolSize: 32,
                category: "项目类型",
                draggable: true,
                value: 15
              },
              {
                id: 3,
                name: "装饰装修项目",
                symbolSize: 40,
                category: "项目类型",
                draggable: true,
                value: 15
              },
              {
                id: 4,
                name: "园林绿化项目",
                symbolSize: 40,
                category: "项目类型",
                draggable: true,
                value: 15
              },
              {
                id: 5,
                name: "其他项目",
                symbolSize: 40,
                category: "项目类型",
                draggable: true,
                value: 15
              },
              {
                id: 6,
                name: "定性评审法",
                symbolSize: 22,
                category: "评标办法",
                draggable: true,
                value: 10
              }
            ],
            links: [
              {
                source: "0",
                speed: 10,
                target: "1"
              },
              {
                source: "0",
                speed: 10,
                target: "0"
              },
              {
                source: "0",
                speed: 10,
                target: "2"
              },
              {
                source: "0",
                speed: 10,
                target: "3"
              },
              {
                source: "0",
                speed: 10,
                target: "4"
              },
              {
                source: "0",
                speed: 10,
                target: "5"
              },
              {
                source: "0",
                speed: 10,
                target: "6"
              },
              {
                source: "0",
                speed: 30,
                target: 2
              }
            ],
            categories: [
              {
                name: "0"
              },
              {
                name: "1"
              }
            ],
            focusNodeAdjacency: true,
            roam: true, // 平移缩放
            // label: {
            //   normal: {
            //     show: true,
            //     color: "#EEE2FA",
            //     // textBorderColor: "white",
            //     // textBorderWidth: 1,
            //    // position: "top",
            //     textStyle: {
            //       fontSize: 14,
            //     }
            //   }
            // },
            lineStyle: {
              normal: {
                opacity: 1,
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#402B7E"
                    },
                    {
                      offset: 1,
                      color: "#A988CA"
                    }
                  ]
                },
                width: 1
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.flow_direction {
  width: 620px;
  height: 550px;
  float: left;
  margin-left: 20px;
  .dir_chart {
    width: 620px;
    height: 550px;
    overflow: hidden;
    .echarts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
